<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>站点管控</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/contorl_index.css">
    <script src="../lib/jquery/jquery-3.4.1.js"></script>
    <script src="../lib/echarts/echarts.js"></script>
    <script src="../lib/echarts/echarts-gl.js"></script>
    <script src="../js/faultRateBarOnly.js"></script>
    <script src="../js/control_index.js"></script>
    <script type="text/javascript" src="../lib/map/map.js"></script>
    <script src="../lib/map/cityweather.js"></script>
</head>
<body>
<div class="verticalLine" style="left: 27vw;">
    <div></div>
    <div></div>
</div>
<div class="verticalLine" style="right: 27vw;">
    <div></div>
    <div></div>
</div>
<section class="section aside left" style="width: 27vw;">
    <section class="left-top status">
        <span style="top: -4px; left: 0;"></span>
        <span style="top: -4px; right: 0;"></span>
        <span style="bottom: 6px; left: 0;"></span>
        <span style="bottom: 6px; right: 0;"></span>
        <div>
            <!-- TODO: left-top section -->
            <p style="padding: 20px;font-size: 25px"><span>状态:</span><span>正常</span></p>
            <p style="padding: 20px;font-size: 25px"><span>运行时长:</span><span>5小时</span></p>
        </div>
    </section>
    <section class="left-middle">
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>故障率</span>
        </div>
        <div>
            <!-- TODO: left-middle section -->
            <div id="faultRateBar_cc" style="width: 100%;height: 100%"></div>   <!--故障率仪表盘-->
        </div>
    </section>
    <section class="left-bottom">
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>照片</span>
        </div>
        <div>
            <!-- TODO: left-bottom section -->
            <img src="images/lidarPic.jpg" style="width: 100%;height: 100%">
        </div>
    </section>
</section>
<section class="section center" style="width: 46vw;">
    <header>站&nbsp;点&nbsp;管&nbsp;控</header>
    <section class="center-middle">
        <div class="weather">
            <!-- TODO: weather section -->
            <div class="weatherBox">
                <div style="font-size: 50px;float: left;margin-left: 50px;">
                    <span>长春站</span>
                </div>
                <div style="float: left">
                    <div style="font-size: 50px;margin-top: -30px;margin-left: 50px;">
                        <span id="weather_cc"></span>
                    </div>
                    <div style="font-size: 50px;margin-left: 50px;">
                        <span id="time"></span>
                    </div>
                </div>

            </div>
        </div>
        <div class="info">
            <div><span>经度：</span><span></span></div>
            <div><span>纬度：</span><span></span></div>
            <div><span>预计下次定标时间：</span><span></span></div>
        </div>
    </section>
    <section class="center-bottom">
        <!-- TODO: center-bottom section -->
        <div id="map" style="width:100%;height:480px;float: left"></div>    <!--中国地图-->
    </section>
</section>
<section class="section aside right" style="width: 27vw">
    <section>
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>维护计划</span>
        </div>
        <div>
            <!-- TODO: right-top section -->
            <div>XXXXXXXXXX</div>
        </div>
    </section>
    <section>
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>维护记录</span>
        </div>
        <div>
            <!-- TODO: right-bottom section -->
            <table class="uphold">
                <tr>
                    <td style="width: 100px;">维护项目</td>
                    <td style="width: 350px;">1</td>
                </tr>
                <tr>
                    <td>维护位置</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>故障描述</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>维护情况</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>5</td>
                </tr>
            </table>
        </div>
    </section>
</section>
</body>
</html>